@extends('admin.layouts.index')
@section('title', '外链列表')

@section('content')
<link rel="stylesheet" href="/assets/css/daterangepicker.css">
<script src="/assets/moment/moment.js"></script>
<script src="/assets/moment/locale/zh-cn.js"></script>
<script src="/js/daterangepicker.js"></script>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form class="m-search" method="GET" action="{{ URL::current() }}">
                    <div class="m-search-items">
                        <div class="m-search-item">
                            <label>外链ID</label>
                            <input type="text" name="links_id" placeholder="请输入外链ID" value="{{ isset($condition['links_id']) ? $condition['links_id'] : '' }}">
                        </div>
                        <div class="m-search-item">
                            <label>二维码ID</label>
                            <input type="text" name="qrcodes_id" placeholder="请输入二维码ID" value="{{ isset($condition['qrcodes_id']) ? $condition['qrcodes_id'] : '' }}">
                        </div>
                        <div class="m-search-item">
                            <label>用户ID</label>
                            <input type="text" name="users_id" placeholder="请输入用户ID" value="{{ isset($condition['users_id']) ? $condition['users_id'] : '' }}">
                        </div>
                        <div class="m-search-item">
                            <label>类型</label>
                            <select name="status">
                                <option value="">全部类型</option>
                                <option value="1">新增</option>
                                <option value="2">更新</option>
                                <option value="3">删除</option>
                            </select>
                        </div>
                        <div class="m-search-item">
                            <label>时间</label>
                            <input type="text" id="created_at" name="created_at" placeholder="选择时间" onclick="daterangepicker()" autocomplete="off">
                            <input type="hidden" id="created_start" name="created_start" value="{{ isset($condition['created_start']) ? $condition['created_start'] : '' }}">
                            <input type="hidden" id="created_end" name="created_end" value="{{ isset($condition['created_end']) ? $condition['created_end'] : '' }}">
                        </div>
                        <div class="m-search-item">
                            <button class="button">立即搜索</button>
                        </div>
                    </div>
                </form>
                <table class="table table-bordered table-nowrap">
                    <thead>
                        <tr>
                            <th scope="col">二维码ID</th>
                            <th scope="col">外链ID</th>
                            <th scope="col">用户ID</th>
                            <th scope="col">二维码</th>
                            <th scope="col">类型</th>
                            <th scope="col">时间</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($qrcodeLists as $qrcodeList)
                        <tr>
                            <td>{{ $qrcodeList->qrcodes_id }}</td>
                            <td>{{ $qrcodeList->links_id }}</td>
                            <td>{{ $qrcodeList->users_id }}</td>
                            <td><img src="{{ $qrcodeList->img_url }}" style="height: 50px;"><a href="javascript:;" class="text-primary ms-2" onclick="showQrcode('{{ $qrcodeList->img_url }}');">查看</a></td>
                            @if($qrcodeList->status == 1)
                            <td class="text-success">新增</td>
                            @elseif($qrcodeList->status == 2)
                            <td class="text-warning">更新</td>
                            @else
                            <td class="text-danger">删除</td>
                            @endif
                            <td>{{ $qrcodeList->created_at }}</td>
                            <td>
                                <div class="table-handdle-td">
                                    <a target="_blank" href="{{ url('admin/links_lists/links_lists_detial',['links_id'=>$qrcodeList->links_id]) }}" class="table-handdle-link">外链详情</a>
                                    <a target="_blank" href="{{ url('/admin/users/users_detial',['users_id'=>$qrcodeList->users_id]) }}">用户详情</a>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7">当前暂无数据记录！</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>

                <div class="pagination-container">
                    {!! $qrcodeLists->appends($condition)->render() !!}
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#created_at').daterangepicker({
        "autoUpdateInput":false,
        "autoApply": true,
        "minYear": 2020,
        "maxYear": moment().format("YYYY"),
        "locale": {
            "format": "YYYY-MM-DD",
            "separator": " - ",
            "applyLabel": "Apply",
            "cancelLabel": "Cancel",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            "weekLabel": "W",
            "daysOfWeek": ["日","一","二","三","四","五","六"],
            "monthNames": ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            "firstDay": 1
        },
        "startDate": moment().subtract(7, "days").format("YYYY-MM-DD"),
        "endDate": moment().format("YYYY-MM-DD"),
        "minDate": moment().subtract(90, "days").format("YYYY-MM-DD"),
        "maxDate": moment().format("YYYY-MM-DD"),
        "opens": "left"
    });

    $('#created_at').on('apply.daterangepicker', function(ev, picker) {
        var startTime = picker.startDate.format('YYYY-MM-DD');
        var endTime = picker.endDate.format('YYYY-MM-DD 23:59:59');
        $("#created_start").val(moment(startTime).unix());
        $("#created_end").val(moment(endTime).unix());
        $(this).val(picker.startDate.format('YYYY-MM-DD') +' 至 '+picker.endDate.format('YYYY-MM-DD'));
    });

    function showQrcode(imgurl) {
        $("#service_qrcode").attr("src",imgurl).css("height","auto");
        $("#service_text").text("外链二维码");
        $("#service_time").text("");
        $("#service_describe").text("请使用微信扫描二维码查看。");
        $('#serviceModal').modal('toggle');
    }
</script>
@endsection
